<template>
<!--  创建DOM容器 指定大小-->
  <div class='trend-cahrt-container' ref='target'></div>
</template>

<script setup>
// 导入Echarts 模块
import * as echarts from 'echarts'
import { ref, onMounted, defineProps } from 'vue'
import { useI18n } from 'vue-i18n'
import { watchSwitchLang } from '@/utils/i18n'
const i18n = useI18n()
const props = defineProps({
  data: {
    required: true,
    type: Object
  }
})
// 利用echarts.init(target), 获取到 mcharts 的实例
const target = ref(null)
let mChart
onMounted(() => {
  mChart = echarts.init(target.value)
  renderChart()
})
const renderChart = () => {
// 构建 options 配置对象 (echarts 渲染核心)
  const options = {
  //  鼠标移入之后展示提示框
    tooltip: {
    //  鼠标移入到坐标轴, 触发提示
      trigger: 'axis',
      //  移入坐标轴时, 提示框展示内容的配置
      axisPointer: {
      //  显示十字准星
        type: 'cross',
        //  指示器的样式
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 图例配置
    legend: {
      data: [i18n.t('msg.chart.monthIncome'), i18n.t('msg.chart.dayIncome')],
      // 图例展示位置
      right: 0
    },
    //  echarts 网格绘制的位置
    grid: {
      top: 20,
      right: 0,
      left: 0,
      bottom: 0,
      // 计算边距时, 包含标签
      containLabel: true
    },
    //  x轴配置
    xAxis: {
    //  坐标轴类型
      type: 'category',
      //  坐标轴数据
      data: props.data.monthAmountList.map(item => item.time),
      //  刻度尺配置
      axisTick: {
        show: false
      }
    },
    //  y轴配置
    yAxis: {
      //  坐标轴类型
      type: 'value',
      // 最小值,
      min: 0,
      // 最大值
      max: function (value) {
        return parseInt(value.max * 1.2)
      },
      // 刻度上展示的文字
      axisLabel: {
        formatter: `{value} ${i18n.t('msg.chart.unit')}`
      }
    },
    //  图表配置
    series: [
      {

        // 图表名字，对应 legend.data[0]
        name: i18n.t('msg.chart.monthIncome'),
        // 图表类型
        type: 'bar',
        // 柱的宽度
        barWidth: 20,
        // 提示框展示配置
        tooltip: {
          valueFormatter: function (value) {
            return value + `${i18n.t('msg.chart.unit')}`
          }
        },
        // 数据源
        data: props.data.monthAmountList.map(item => item.amount)
      },

      {

        // 图表名字，对应 legend.data[0]
        name: i18n.t('msg.chart.dayIncome'),
        // 图表类型
        type: 'line',
        // 颜色
        color: '#6EC6D0',
        // 平滑
        smooth: true,
        // 提示框展示配置
        tooltip: {
          valueFormatter: function (value) {
            return value + `${i18n.t('msg.chart.unit')}`
          }
        },
        // 数据源
        data: props.data.dailyCurve.map(item => item.amount)
      }
    ]
  }
  mChart.setOption(options)
}
watchSwitchLang(renderChart)
</script>

<style lang='scss' scoped>
.trend-cahrt-container {
  height: 100%;
}
</style>
